<%@ taglib prefix='c' uri='http://java.sun.com/jstl/core' %>
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>User Secure Home Page</title>
        <link rel="stylesheet" href="../js/dijit/themes/claro/claro.css" media="screen">
        
        <style type="text/css">
		@import "../js/dojo/resources/dojo.css";
		@import "../js/dojox/grid/resources/Grid.css";
		@import "../js/dojox/grid/resources/claroGrid.css";
		.grid {
			width: 70em;
			height: 15em;
		}
		</style>
        
		<script>
			var dojoConfig = {
			    baseUrl: "../js/",
			    tlmSiblingOfDojo: false,
			    packages: [
			        { name: "dojo", location: "../js/dojo" },
			        { name: "dijit", location: "../js/dijit" },
			        { name: "dojox", location: "../js/dojox" },
			        { name: "my", location: "../js/my"}
			    ]
			};
		</script>
		
		<script src="../js/dojo/dojo.js"data-dojo-config="async:true, parseOnLoad:true"></script>
		
		<script type="text/javascript">	require(["dijit/layout/BorderContainer", "dijit/form/Button", "dijit/layout/ContentPane", 
		                               	         "dojo/parser", "dojo/ready", "dijit/form/Form", "my/form/AddUserForm", "my/dialog/AddUserDialog",
		                               	         "my/dialog/AddStudentDialog", "my/form/AddStudentForm", "my/form/AddClassesForm", "my/dialog/AddClassesDialog",
		                               	         "my/dialog/AssignTeacherToClassesDialog", "my/form/AssignTeacherToClassesForm",
		                               	      	 "my/dialog/AssignStudentToClassesDialog", "my/form/AssignStudentToClassesForm",
		                               	      	 "my/dialog/DeleteTeacherFromClassesDialog", "my/form/DeleteTeacherFromClassesForm",
		                               	      	 "my/dialog/DeleteStudentFromClassesDialog", "my/form/DeleteStudentFromClassesForm",		                               	      	 
		                               	      	 "my/dialog/AddStudentDegreeDialog", "my/form/AddStudentDegreeForm",
		                               	      	 "my/dialog/GradesGridDialog", "my/grid/GradesGrid",
		                               	      	 "my/dialog/EditGradeDialog", "my/form/EditGradeForm",
		                               	      	 "my/dialog/EditConcreteGradeDialog", "my/form/EditConcreteGradeForm",
		                               	      	 "my/dialog/EditUserDialog", "my/form/EditUserForm",
		                               	      	 "my/dialog/DeleteUserDialog","my/form/DeleteUserForm",
		                               	      	 "my/dialog/EditAnotherUserDialog","my/form/EditAnotherUserForm",
		                               	      	 "my/form/Base",
		                               	      	 "my/grid/ScheduleGrid", "my/dialog/ScheduleGridDialog"]);
		</script>

		<style type="text/css">
			html, body {
			    height: 100%;
			    margin: 0;
			    overflow: hidden;
			    padding: 0;
			}
			#appLayout {
			    height: 100%;
			}
			#leftCol {
			    width: 14em;
			    background-color: #BFEFFF;
			}
		</style>
		
    </head>
    <body class="claro">
    <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'"></div>
        <div class="edgePanel" style="background-color: #BFEFFF; text-align: right" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Context: 
        	<label id="contextLabel"></label>
        </div>
        <div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Navigator
        	<p>Select action from navigation menu</p>
        	<table data-dojo-type="my.form.Base">
        		<tr id="addUserRow" style="visibility:hidden">
        			<td>
					<button id="addUserButton" data-dojo-type="dijit.form.Button" type="button">Add user
					    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("addUserDialog").show();
   	 					</script>
					</button>
					</td>
				</tr>
				<tr id="deleteUserRow" style="visibility:hidden">
        			<td>
					<button id="deleteUserButton" data-dojo-type="dijit.form.Button" type="button">Delete user
					    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("deleteUserDialog").show();
   	 					</script>
					</button>
					</td>
				</tr>
				<tr id="editAnotherUserRow" style="visibility:hidden"><td>
					<button id="editAnotherUserButton" data-dojo-type="dijit.form.Button" type="button">Edit user
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("editAnotherUserDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr id="addStudentRow" style="visibility:hidden"><td>
					<button id="addStudentButton" data-dojo-type="dijit.form.Button" type="button">Add student
					    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("addStudentDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr id="addClassesRow" style="visibility:hidden"><td>
					<button id="addClassesButton" data-dojo-type="dijit.form.Button" type="button">Add classes
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("addClassesDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr id="assignTeacherToClassesRow" style="visibility:hidden"><td>
					<button id="assignTeacherToClassesButton" data-dojo-type="dijit.form.Button" type="button">Assign Teacher To Classes
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("assignTeacherToClassesDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr id="deleteTeacherFromClassesRow" style="visibility:hidden"><td>
					<button id="deleteTeacherFromClassesButton" data-dojo-type="dijit.form.Button" type="button">Delete Teacher From Classes
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("deleteTeacherFromClassesDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr id="assignStudentToClassesRow" style="visibility:hidden"><td>
					<button id="assignStudentToClassesButton" data-dojo-type="dijit.form.Button" type="button">Assign Student To Classes
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("assignStudentToClassesDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr id="deleteStudentFromClassesButton" style="visibility:hidden"><td>
					<button id="deleteStudentFromClassesButton" data-dojo-type="dijit.form.Button" type="button">Delete Student From Classes
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("deleteStudentFromClassesDialog").show();
   	 					</script>
					</button>
				</td></tr>				
				
				<tr><td>
					<button id="addStudentDegreeButton" data-dojo-type="dijit.form.Button" type="button">Add degree for student
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("addStudentDegreeDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="editGradeButton" data-dojo-type="dijit.form.Button" type="button">Edit student degree
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("editGradeDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="reportGradesButton" data-dojo-type="dijit.form.Button" type="button">Grades report
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("gradesGridDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="scheduleGridButton" data-dojo-type="dijit.form.Button" type="button">Schedule
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("scheduleGridDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="editUserButton" data-dojo-type="dijit.form.Button" type="button">Manage account
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("editUserDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="logoutButton" data-dojo-type="dijit.form.Button" type="button">Logout
				    	<script type="dojo/connect" data-dojo-event="onClick">
    						window.location = "/Perseus/j_spring_security_logout";
  						</script>
					</button>
				</td></tr>
			</table>
        </div>
    </div>
    
    <div id="addUserDialog" data-dojo-type="my.dialog.AddUserDialog" title="Add user" style="width: 350px; height: 500px;"></div>
    <div id="deleteUserDialog" data-dojo-type="my.dialog.DeleteUserDialog" title="Delete user" style="width: 350px; height: 500px;"></div>
    <div id="addStudentDialog" data-dojo-type="my.dialog.AddStudentDialog" title="Add student" style="width: 350px; height: 500px;"></div>
    <div id="addClassesDialog" data-dojo-type="my.dialog.AddClassesDialog" title="Add classes" style="width: 350px; height: 500px;"></div>
    <div id="assignTeacherToClassesDialog" data-dojo-type="my.dialog.AssignTeacherToClassesDialog" title="Assign Teacher To Classes" style="width: 350px; height: 500px;"></div>
    <div id="deleteTeacherFromClassesDialog" data-dojo-type="my.dialog.DeleteTeacherFromClassesDialog" title="Delete Teacher From Classes" style="width: 350px; height: 500px;"></div>
    <div id="assignStudentToClassesDialog" data-dojo-type="my.dialog.AssignStudentToClassesDialog" title="Assign Student To Classes" style="width: 350px; height: 500px;"></div>
    <div id="deleteStudentFromClassesDialog" data-dojo-type="my.dialog.DeleteStudentFromClassesDialog" title="Delete Student From Classes" style="width: 350px; height: 500px;"></div>  
    <div id="addStudentDegreeDialog" data-dojo-type="my.dialog.AddStudentDegreeDialog" title="Add student degree" style="width: 350px; height: 500px;"></div>
    <div id="editGradeDialog" data-dojo-type="my.dialog.EditGradeDialog" title="Edit student degree" style="width: 350px; height: 500px;"></div>
    <div id="editeConcreteGradeDialog" data-dojo-type="my.dialog.EditConcreteGradeDialog" title="Edit grade" style="width: 350px; height: 500px;"></div>
    <div id="editUserDialog" data-dojo-type="my.dialog.EditUserDialog" title="Manage account" style="width: 350px; height: 500px;"></div>
    <div id="editAnotherUserDialog" data-dojo-type="my.dialog.EditAnotherUserDialog" title="Edit account" style="width: 350px; height: 500px;"></div>
    <div id="gradesGridDialog" data-dojo-type="my.dialog.GradesGridDialog" title="Grades" style="width: 900px; height: 600px;"></div>
    <div id="scheduleGridDialog" data-dojo-type="my.dialog.ScheduleGridDialog" title="Schedule" style="width: 900px; height: 600px;"></div>
    
</body>
</html>